<template>
    <div class="infinite-container">
        <left-border-title :title="'配送信息'"></left-border-title>
        <div class="fheader">
            <span><img src="../../assets/wzjl/icon_zxwz_doctor.png"></span>
            <span><span>顺丰速递</span><span>配送中</span></span>
    
        </div>
        <div class="fcon">
            <ul>
                <li>
                    <div>运单编号 </div>
                    <div class="hao">23539090898</div>
                </li>
                <li>
                    <div>官方电话</div>
                    <div>95554</div>
                </li>
            </ul>
        </div>
        <div class="mt10"></div>
        <left-border-title :title="'物流信息'"></left-border-title>
        <div class="mcon">
            <div class="line" :style="pos">
            </div>
            <div v-for="(i,index) in 5" class="mitem">
                <div class="circle" :class="{pass:index!=0}">
                    <div></div>
                </div>
                <div>快快伯已经走了了了了了啊快伯已经走了了了了了啊伯已经走了了了了了啊</div>
                <div>2014-7-7</div>
            </div>
        </div>
      
    </div>
</template>

<script>
    import leftBorderTitle from '../../components/leftBorderTitle.vue'
    export default {
        data() {
            return {
                pos: {
                    top: 0,
                    left: 0,
                    height: 0
                }
            }
        },
        components: {
            leftBorderTitle
        },
        methods: {},
        mounted() {
            this.$nextTick(()=> {
                var cc = document.querySelectorAll(".mcon .circle");
                if (cc.length > 1) {
                    var item = cc[0];
                    var item1 = cc[cc.length - 1];
                    var w = item.offsetWidth;
                    var t = item.offsetTop + item.parentNode.offsetTop;
                    var t1 = item1.offsetTop + item1.parentNode.offsetTop;
                    var l = item.offsetLeft + item.parentNode.offsetLeft;
                    this.pos.left = (l + w / 2-1)+"px";
                    this.pos.top = (t + w / 2)+"px";
                    this.pos.height = (t1 - t + w / 2)+"px";
                }
            });
        }
    }
</script>

<style lang="less" scoped>
    @import "../../common/css/flex.css";
    @import '../../common/css/component';
    .infinite-container {
        padding-bottom: 30px;
        @{deep} .mu-item-left img {
            width: 30px;
            height: 30px;
        }
        @{deep} .mu-item.show-left {
            padding-left: 60px;
        }
        @{deep} .mu-item-title {
            color: #666;
        }
        @{deep} .mu-item-right {
            color: #333;
        }
        @{deep} .mu-item {
            min-height: 44px;
        }
        .feeText {
            color: #0fc47d;
        }
        .fheader {
            width: 100%;
            height: 55px;
            background: #fff;
            border-top: 1px solid #e8e8e8;
            padding-left: 15px;
            padding-right: 15px;
            display: table;
            img {
                width: 40px;
                height: 40px;
            }
            >span:first-child {
                line-height: 0;
                width: 40px;
            }
            >span {
                display: table-cell;
                vertical-align: middle;
                font-size: 14px;
                >span {
                    padding-left: 10px;
                }
                >span:last-child {
                    color: #2abc6d;
                }
            }
        }
        .lcon {
            width: 100%;
            padding-top: 10px;
            text-align: center;
            @{deep}.mu-raised-button {
                width: 80%;
                height: 44px;
                margin-top: 20px;
            }
            @{deep}.mu-raised-button-secondary {
                color: #f24242;
                border: 1px solid #f24242;
                background: #fff1f1;
            }
        }
        .fcon {
            padding: 15px;
            background: #fff;
            border-top: 1px solid #e8e8e8;
            >ul {
                >li+li {
                    margin-top: 5px;
                }
                >li {
                    display: table;
                    >div {
                        display: table-cell;
                        font-size: 14px;
                    }
                    >div:first-child {
                        color: #666;
                        width: 5em;
                        white-space: nowrap;
                        padding-right: 15px;
                    }
                    >div:last-child {
                        color: #333;
                    }
                    >div.hao {
                        color: #ff6600;
                    }
                }
            }
        }
        .mcon {
            width: 100%;
            border-top: 1px solid #e8e8e8;
            position: relative;
            background: #fff;
            padding: 0px 15px 15px 60px;
            color: #999;
            .mitem {
                position: relative;
                padding-top: 15px;
                .circle {
                    top: 18px;
                    left: -35px;
                }
            }
            .circle {
                &.pass{
                    border: 1px solid #999;
                    >div{
                        background:#999;
                    }
                }
                position: absolute;
                background: #fff;
                box-sizing: border-box;
                width: 14px;
                height: 14px;
                padding: 2px;
                border: 1px solid #2abc6d;
                border-radius: 50%;
                >div {
                    box-sizing: border-box;
                    background: #2abc6d;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .line {
                width: 1px;
                position: absolute;
                top: 0;
                left: 30px;
                border-left: 1px dashed #999;
                height: 400px;
            }
        }
    }
</style>